<template>
  <div>

    <Head />
    <div class="main">
      <!-- 导航区域 -->
      <div class="nav">
        <a @click="routerTo(1)" class="nav-item">
          <img src="../assets/img/home/home-nav (1).jpg" />
        </a>
        <a class="nav-item" href="#">
          <img src="../assets/img/home/home-nav (2).jpg" />
        </a>
        <a class="nav-item" href="#">
          <img src="../assets/img/home/home-nav (3).jpg" />
        </a>
        <a class="nav-item" href="#">
          <img src="../assets/img/home/home-nav (4).jpg" />
        </a>
        <a class="nav-item" href="#">
          <img src="../assets/img/home/home-nav (5).jpg" />
        </a>
      </div>
      <div class="content">
        <a class="topList" href="#" data-toggle="modal"
          data-target="#exampleModal">
          <img src="../assets/img/home/toplist.png" alt="" />
          排行榜
        </a>
        <div class="tab">
          <el-menu class="el-menu-demo" mode="horizontal" router
            :default-active="$route.path" active-text-color="#007bff">
            <el-menu-item index="/home/content1" class="nav-el">首页
            </el-menu-item>
            <el-menu-item index="/home/content2" class="nav-el">我的收藏
              <el-badge class="mark" :value="collectNum" />
            </el-menu-item>

            <el-menu-item index="/home/content3" class="nav-el">错题库
              <el-badge class="mark" :value="errorNum" />
            </el-menu-item>
          </el-menu>
        </div>
        <div class="tab-content">
          <!-- 路由 -->
          <router-view @getErrorNum="getErrorNum"
            @getcollectNum="getcollectNum"></router-view>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
      aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- 头 -->
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
              正式考试排行top10
            </h5>
            <button type="button" class="close" data-dismiss="modal"
              aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- 身体 -->
          <div class="modal-body">
            <div class="row topList-model">
              <div class="col-3">排行</div>
              <div class="col-6">学生姓名</div>
              <div class="col-3">分数</div>
            </div>
            <div class="row topList-model list-model"
              v-for="(item, i) in topListArr" :key="item._id">
              <div class="col-3">
                {{ i + 1 }}
                <img :src="item.studentId.avatar" alt="" />
              </div>
              <div class="col-6">{{ item.studentId.name }}</div>
              <div class="col-3">{{ item.score }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal setting-->
    <div class="modal fade" id="settingModel" tabindex="-1"
      aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="
          modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg
        ">
        <div class="modal-content">
          <!-- 头 -->
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">修改资料</h5>
            <button type="button" class="close" data-dismiss="modal"
              aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- 身体 -->
          <div class="modal-body">
            <div class="alert alert-primary" role="alert">
              ！ 你可以在这里对个人资料进行完善
            </div>
            <table class="table table-borderless">
              <tbody>
                <tr>
                  <td>手机号码：</td>
                  <td>
                    <span>{{ $store.state.userInfo.phone }}</span><i>&nbsp;&nbsp;&nbsp;&nbsp;手机号暂时不允许进行修改，如需修改，请联系我们</i>
                  </td>
                </tr>
                <tr>
                  <td>设置头像</td>
                  <td class="td">
                    <div class="setting-imgbox">
                      <img :src="newImg || $store.state.userInfo.avatar"
                        class="img-user-setting" />
                      <input type="file" @change="changeImg" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>姓名</td>
                  <td>
                    <input type="text" v-model="changeData.name" />
                  </td>
                </tr>
                <tr>
                  <td>性别</td>
                  <td class="setting-sex">
                    男：<input type="radio" name="sex" value="男"
                      v-model="changeData.gender" />
                    女：<input type="radio" name="sex" value="女"
                      v-model="changeData.gender" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
              data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="settingBtn"
              @click="postNewData" data-dismiss="modal">
              提交保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "./home/Head.vue";
export default {
  name: "Home",
  components: {
    Head
  },
  data() {
    return {
      changeData: {
        name: "",
        gender: "男"
      },
      newImg: this.$store.state.userInfo.avatar,
      topListArr: [],
      typeList: [],
      errorNum: "",
      collectNum: ""
    };
  },
  methods: {
    routerTo(i) {
      this.$router.push({
        path: `/stest1`,
        query: {
          _id: this.typeList[i]._id
        }
      });
    },
    // 上传图片
    async changeImg(e) {
      const files = e.target.files;
      // console.log(files);
      const fd = new FormData();
      fd.append("file", files[0]);
      await this.$http.post("/images/uploadImages", fd).then(({ data }) => {
        this.newImg = data.data;
      });
    },
    //修改学生资料
    postNewData() {
      this.$http
        .post("/students/changeStudent", {
          _id: this.$store.state.userInfo._id,
          avatar: this.newImg,
          gender: this.changeData.gender,
          name: this.changeData.name
        })
        .then(({ data }) => {
          this.$store.dispatch("getUser");
          console.log(data.message);
        });
    },
    getErrorNum(num) {
      this.errorNum = num;
    },
    getcollectNum(num) {
      this.collectNum = num;
    }
  },

  created() {
    // 获取排行榜信息
    this.$http.post("/tested/getTestResults").then(({ data }) => {
      // 排序
      this.topListArr = data.result.sort((a, b) => b.score - a.score);
    });
    // 获取类型
    this.$http.post("/tests/getTests").then(({ data }) => {
      this.typeList = data;
    });
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 1050px;
  margin: 55px auto 0;

  .nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .nav-item {
      width: 180px;
      height: 65px;
      padding: 20px 30px;
      position: relative;
      cursor: pointer;
      img {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .content {
    width: 1050px;
    background-color: #fff;
    position: relative;
    .topList {
      position: absolute;
      height: 50px;
      line-height: 50px;
      right: 30px;
      display: flex;
      align-items: center;
      color: black;
      text-decoration: none;
    }
    .tab {
      height: 50px;
      line-height: 50px;
      display: flex;
      font-size: 16px;
      border-bottom: 1px solid rgb(230, 230, 230);
      .nav-el {
        line-height: 50px;
        height: 50px;
        width: 160px;
        text-align: center;
        border-bottom: 2px solid;
      }
    }
    .tab-content {
      padding: 25px 50px;
    }
  }
}
.topList-model {
  padding: 0 20px;
  background-color: rgb(228, 228, 228);
  height: 50px;
  line-height: 50px;
  text-align: center;
  .topListArr {
    display: flex;
  }
  img {
    width: 30px;
    height: 30px;
    background-color: yellow;
    border-radius: 15px;
  }
}
.list-model {
  background-color: #fff;
}
#settingModel {
  table {
    width: auto;
  }
  .setting-imgbox {
    display: flex;
    align-items: center;
    .img-user-setting {
      width: 80px;
      height: 80px;
    }
    #upImg {
      border: 0;
      width: 80px;
      height: 80px;
      background: url(../assets/img/home/setting-upimg.png) no-repeat;
    }
  }
  .setting-sex {
    input {
      margin-right: 50px;
    }
  }
}

.mark {
  background-color: rgba(0, 0, 0, 0);
}
</style>
